<template>
  <div id="seeOreder">
    <div class="bgc">
      <van-row>
        <van-col span="24">
          <van-nav-bar title="查看订单" left-arrow @click-left="onClickLeft" />
        </van-col>
        <van-col span="24" class="goodsList w">
          <Goodslist :GetShoppingCartList="orderGoods" />
        </van-col>
        <van-col span="24">
          <div class="btn w">
            <van-button color="#6e6e6e" plain round size="mini">卖了换钱</van-button>
            <van-button color="#6e6e6e" plain round size="mini">申请售后</van-button>
          </div>
        </van-col>
        <van-col span="24" class="cell w">
          <van-cell title="商品总价" :value="'￥' + orderGoodsInfo.goodsPrice" size="large" />
          <van-cell title="运费" :value="'￥' + orderGoodsInfo.freightPrice" size="large" />
          <van-cell title="实付款" :value="'￥' + orderGoodsInfo.actualPrice" size="large" />
        </van-col>
        <van-col span="24" class="cell2 w">
          <van-cell title="收货地址" :value="orderGoodsInfo.consignee + ' ' + orderGoodsInfo.mobile + ' ' + orderGoodsInfo.address" size="large" />
          <van-cell title="订单编号" :value="orderGoodsInfo.orderSn" size="large" />
          <van-cell title="付款时间" :value="orderGoodsInfo.addTime" size="large" />
        </van-col>
        <van-col span="24" class="buttom">
          <div class="buttom-btn">
            <van-button color="#7232dd" round plain @click="onDelOrder">删除订单</van-button>
            <van-button hairline round color="linear-gradient(to right, #ff6034, #ee0a24)" @click="onRebuy">
              去评论
            </van-button>
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
import Goodslist from '@/components/user/goodsBlock.vue'
import { Toast } from 'vant'
export default {
  name,
  data() {
    return {
      OrederItem: '',
      orderGoods: '',
      orderGoodsInfo: ''
    }
  },
  components: {
    Goodslist
  },
  mounted() {
    this.OrederItem = this.$store.state.SeeOrederItem
    this.onGetOrderList()
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    onGetOrderList() {
      this.$get('order/detail', { orderId: this.OrederItem.id }).then(result => {
        this.orderGoods = result.data.data.orderGoods
        this.orderGoodsInfo = result.data.data.orderInfo
      })
    },
    // 去评价
    onRebuy() {
      this.$router.push('/rebuy')
      this.$store.commit('PassRebuyItem', this.orderGoods)
    },
    // 删除订单
    onDelOrder() {
      this.$post('order/delete', { orderId: this.OrederItem.id }).then(result => {
        Toast.success('删除成功')
        this.$router.back()
      })
    }
  }
}
</script>
<style lang="less" scoped>
.btn {
  float: right;
  margin-right: 0.1rem;
  opacity: 0.8;
}
.goodsList {
  margin: 0.1rem 0rem;
}
.cell {
  margin: 0.1rem 0rem;
  .van-cell:nth-child(1) {
    border-top-right-radius: 0.1rem;
    border-top-left-radius: 0.1rem;
  }
  .van-cell:last-child {
    border-bottom-right-radius: 0.1rem;
    border-bottom-left-radius: 0.1rem;
    .van-cell__value {
      color: red;
      font-size: 0.16rem;
    }
  }
}
.cell2 {
  margin: 0.1rem 0rem;
  .van-cell:nth-child(1) {
    border-top-right-radius: 0.1rem;
    border-top-left-radius: 0.1rem;
  }
  .van-cell:last-child {
    border-bottom-right-radius: 0.1rem;
    border-bottom-left-radius: 0.1rem;
  }
}
.buttom {
  padding: 0.1rem 0rem;
  width: 100%;
  background-color: #fff;
  position: absolute;
  position: fixed;
  bottom: 0;
  .buttom-btn {
    float: right;
    margin-right: 0.2rem;
  }
}
</style>
